<template>
  <div class="dep_main">
    <div class="btn_div">
      <Power url="/emp/insert">
        <el-button type="success" style="background-color: #42B983;" @click="dialogFormVisible = true">新增员工</el-button>
      </Power>

      <!-- 搜索的相关输入框 -->
      <el-input v-model="search.keyword" placeholder="请输入员工ID/账号/姓名" style="width: 200px" @input="searchEmps()"></el-input>
      <!-- 下拉框 部门 -->
      <el-select v-model="search.depId" placeholder="请选择" clearable>
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.depName"
          :value="item.id">
        </el-option>
      </el-select>

      <!-- 时间选择器 -->
      <el-date-picker
            v-model="search.beginTime"
            type="datetime"
            placeholder="选择开始时间"
            default-time="00:00:00"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>

      <el-date-picker
            v-model="search.endTime"
            type="datetime"
            placeholder="选择结束时间"
            default-time="23:59:59"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>

      <!-- 搜索按钮 -->
      <el-button icon="el-icon-search" circle @click="searchEmps()"></el-button>
    </div>

    <!-- 自定义的表格组件 -->
    <Table ref="mytable" :param="table" :search="search"></Table>


    <!-- 新增角色的弹窗 -->
    <el-dialog title="新增员工" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <!-- 下拉框 -->
          <el-select v-model="form.depId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.depName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="form.sex" :label="0">男</el-radio>
            <el-radio v-model="form.sex" :label="1">女</el-radio>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertEmp()">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 设置角色的抽屉 -->
    <el-drawer
      title="选择角色"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="drawerClose">

      <!-- 按钮 -->
      <el-button type="success" style="background-color: #42B983; margin-bottom: 10px;" @click="updateRole()">修改角色</el-button>

      <div v-for="role in roleList">
        <!-- 角色列表 - 循环角色列表 -->
        <el-checkbox :label="role.id" :key="role.id" v-model="rids" border style="margin-top: 10px; width: 80%;" :checked="role.isChecked">{{role.roleName}}</el-checkbox>
      </div>
    </el-drawer>

  </div>
</template>

<script>
  import Table from './Table'

  export default{
    components:{
      Table
    },
    data(){
      return {
        //当前选择的员工id
        eid: "",
        //当前选择的员工的所属部门id
        depid: "",
        //被选中的角色id集合
        rids: [],
        //抽屉的相关属性
        drawer: false,
        //方向
        direction: 'ltr',
        formLabelWidth: '120px',
        //弹出框的显示标识
        dialogFormVisible: false,
        //部门列表
        options: [],
        //角色列表
        roleList: [],
        //表单数据
        form: {
          depId: "",
          username: "",
          password: "123456",
          name: "",
          age: "",
          sex: 0
        },
        //搜索的相关数据
        search: {
          keyword: "",
          depId: "",
          beginTime: "",
          endTime: ""
        },
        //表格组件的属性
        table: {
          title: [
            {name: "编号", col:"id"},
            {name: "账号", col:"username"},
            {name: "姓名", col:"name"},
            {name: "年龄", col:"age", default: "-"},
            {name: "性别", col:"sex", default: "-", dyncFunction: function(value){
                return value == 0 ? '男' : '女';
            }},
            {name: "所属部门", col:"depName", default: "-"}
          ],
          type: 'POST',
          url: this.$.url.emplist,
          page: {
            enable: true, //是否开启表格组件的分页
            pageSize: 5 //每页显示多少条
          },
          btns: [
            {
              btnName: "设置角色",
              show(rowData){
                return rowData.id != 1;
              },
              click: (rowData) => {
                console.log("员工id：" + rowData.id);
                //设置员工id
                this.eid = rowData.id;
                //设置部门的id
                this.depid = rowData.depId;

                //发送ajax请求当前的角色拥有的权限id集合
                this.$.ajax({
                  url: this.$.url.queyrByDIdAndEId,
                  data: {
                    depId: this.depid,
                    empId: this.eid
                  },
                  success: (data) => {
                    if(data.code == 200){
                      console.log(data.data);
                      this.roleList = data.data;
                    }
                  }
                });

                //打开侧滑菜单
                this.drawer = true;
              }
            }
          ]
        }
      }
    },
    methods:{
      //抽屉关闭的回调
      drawerClose(done){
        //角色的列表数据
        this.roleList = [];
        //已经选中的角色列表
        this.rids = [];
        //关闭抽屉
        done();
      },
      //搜索的方法
      searchEmps(){
        //让table组件，重新发送表单查询的请求
        this.$refs.mytable.request();
      },
      //修改员工的角色
      updateRole(){

        //员工id -  this.eid;

        //角色id集合 -  this.rids;
        // console.log("员工id：" + this.eid + "  角色id：" + JSON.stringify(this.rids));

        //ajax
        this.$.ajax({
          type: 'POST',
          url: this.$.url.updateRole,
          data: {
            eId: this.eid,
            rIds: JSON.stringify(this.rids)
          },
          success: (data) => {
            if(data.code == 200){
              this.$message.success("角色修改成功！");
              this.rids = [];//清空角色复选框选中的值
              this.drawer = false;
            }
          }
        })
      },
      //查询部门列表
      queryDeps(){
        this.$.ajax({
          type: "GET",
          url: this.$.url.deplist,
          success: (data) => {
            if(data.code == 200){
              this.options = data.data;
            }
          }
        });
      },
      //新增员工
      insertEmp(){
        //1、先发ajax
        this.$.ajax({
          type: "POST",
          url: this.$.url.empinsert,
          data: this.form,
          success: (data) => {
            if(data.code == 200){
               //新增成功
               //2、关闭弹窗
               this.dialogFormVisible = false;
               //3、刷新表格
               this.$refs.mytable.request();
            } else if(data.code == 407){
               //数据已经存在
               this.$message.error('账号已经存在');
            }
          }
        });
      }
    },
    mounted(){
      //加载时触发方法
      this.queryDeps();
    }
  }
</script>

<style>
  .dep_main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 100%;
  }

  .table_cls {
    margin-top: 10px;
  }

  .btn_div {
    /* margin-top: 50px; */
    background-color: #E9EEF3;
    text-align: left;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    padding-left: 50px;
  }

  .btn_div > * {
    margin-right: 10px;
  }
</style>
